<template>
	<view class="noticeLayout">
		<view class="title">
			<view class="font">{{detail.articleTitle}}</view>
		</view>
		<view class="info">
			<view class="tag-view">
				<view class="tag" v-for="(item, index) in tags" :key="index">
					<uni-tag :text="item" :inverted="true" type="error" size="mini" />
				</view>
			</view>

			<view class="item">
				<uni-tag text="来源" type="primary" @click="goSource(articleExtra.link)" />
				<uni-dateformat :date="Date.now()" format="yyyy-MM-dd hh:mm:ss" style="margin-left: 10rpx;"></uni-dateformat>
			</view>
		</view>
		<view class="content">
			<mp-html :content="detail.articleContent" :tag-style="tagStyle" />
		</view>
		<!-- <view class="count">阅读量</view> -->
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	import {
		onShareAppMessage,
		onShareTimeline,
		onLoad
	} from "@dcloudio/uni-app"
	import {
		BASE_URL
	} from "@/utils/constants.js";

	import {
		apiGetArticle
	} from "@/api/apis.js"
	import {
		goSource
	} from "@/utils/common.js"

	// 如果不加{},页面模版会报错
	const detail = ref({})
	let articleId

	const articleExtra = ref({
		link: ''
	});

	const tags = ref([])

	onLoad(e => {
		articleId = e.articleId
		getArticleDetail()
	})

	const getArticleDetail = () => {
		apiGetArticle(articleId).then(res => {
			res.data.articleContent = res.data.articleContent.replace(/src="\/media/g,
				`src="${BASE_URL}/media`);
			detail.value = res.data
			try {
				tags.value = (detail.value.tag || '').split(",");
				const extra = JSON.parse(res.data.extra);
				articleExtra.value = extra;
			} catch (error) {
				console.error('Failed to parse detail.extra:', error);
			}
		})
	}

	//分享给好友
	onShareAppMessage((e) => {
		return {
			title: "职场冲冲",
			path: "/pages/notice/detail?articleId=" + articleId
		}
	})

	//分享朋友圈
	onShareTimeline(() => {
		return {
			title: "职场冲冲",
		}
	})

	// 定义样式
	const tagStyle = ref({
		'.container': 'max-width: 800px; margin: 20px auto; background-color: #ffffff; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);',
		'.header, .section': 'padding: 10px 0;',
		'.header': 'border-bottom: 2px solid #d32f2f;',
		'.header h1': 'font-size: 24px; margin: 0;',
		'.header .case-no': 'color: #999; font-size: 14px;',
		'.section h2': 'font-size: 18px; color: #d32f2f; margin-bottom: 10px;',
		'.section p': 'margin: 0;',
		'.keywords': 'margin: 10px 0; background-color: #fbe9e7; padding: 10px; border-left: 5px solid #d32f2f;',
		'.judgment-points': 'margin: 10px 0; background-color: #e3f2fd; padding: 10px; border-left: 5px solid #1976d2;'
	});
</script>

<style lang="scss" scoped>
	// @import '../../static/custom-styles.css';

	.noticeLayout {
		padding: 30rpx;

		.title {
			font-style: 40rpx;
			color: #111;
			line-height: 1.6em;
			padding-bottom: 30rpx;
			display: flex;

			.font {
				padding-left: 6rpx;
			}
		}

		.info {
			display: flex;
			flex-direction: column;
			// align-items: center;
			color: #999;
			
			.tag-view {
				display: flex;
				flex-direction: row;
				.tag {
					margin: 2rpx 2rpx 5rpx 0;
				}
				margin-bottom:10rpx;
			}

			.item {
				padding-right: 20rpx;
				margin-bottom: 12rpx;
			}

		}

		.content {
			padding: 50rpx 0;
		}

		.count {
			color: #999;
			font-size: 28rpx;
		}
	}
</style>